.home {
  $f: 19.2;

  .banner {
    position: relative;
    &::before{
      content:'';
      display: block;
      position: absolute;
      left: 0;
      top:0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .2);
    }
    img {
      width: 100%;
      display: block;
      object-fit: cover;
      height: 33vh;
    }
    .text{
      position: absolute;
      left: 0;
      width: 100%;
      bottom:30/$f+vw;
      color:white;
      padding: 0 200/$f+vw;
      .p1{
        font-size: 30/$f+vw;
        font-weight: 600;
        line-height: 1;
      }
      .des{
        font-size: 20/$f+vw;
        margin-top: 20/$f+vw;
        line-height: 1.3;
        font-weight: 200;
      }
    }
  }

  .nav_menu {
    background: #F5F5F5;
    padding: 0 200/$f+vw;
    display: flex;
    align-items: center;

    a {
      display: block;
      padding: 20/$f+vw 44/$f+vw;
      color: #222;
      font-size: 17/$f+vw;
      line-height: 1.2;
      transition: all 600ms;
      cursor: pointer;

      &:hover {
        background: #FFF;
        color: #E6001A;
      }
    }

    .on {
      background: #FFF;
      color: #E6001A;
    }

    span {
      width: 1px;
      height: 10/$f+vw;
      background: #CCC;
    }
  }

  .container {
    margin: 35/$f+vw 200/$f+vw;

    .back {
      display: flex;
      align-items: center;
      width: fit-content;

      svg {
        width: 24/$f+vw;
      }

      p {
        color: #E94829;
        font-size: 20/$f+vw;
        margin-left: 10/$f+vw;
      }
    }

    .section1 {
      .t {
        margin: 43/$f+vw 0 80/$f+vw 0;
        color: rgba(25, 25, 25, 1);
        font-size: 32/$f+vw;
      }

      .content {
        display: flex;
        justify-content: space-between;

        .l {
          width: 23%;

          .types {
            .box {
              .pt {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 17/$f+vw 10/$f+vw 19/$f+vw 10/$f+vw;
                border-bottom: 2px solid #191919;
                color: rgba(51, 51, 51, 1);
                font-size: 20/$f+vw;
                margin-bottom: 35/$f+vw;

                svg {
                  transition: all 600ms;
                  width: 14/$f+vw;
                }
              }

              .chose {
                .item {
                  display: flex;
                  align-items: center;
                  margin-bottom: 17/$f+vw;
                  cursor: pointer;
                  .k {
                    width: 24/$f+vw;
                    height: 24/$f+vw;
                    border: 1px solid #C7C7C7;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 10/$f+vw;

                    img {
                      max-width: 80%;
                      object-fit: contain;
                      opacity: 0;
                      transition: all 600ms;
                    }
                  }

                  p {
                    font-size: 20/$f+vw;
                    line-height: 1.3;
                  }
                }

                .on2 {
                  .k {
                    img {
                      opacity: 1;
                    }
                  }
                }
              }
              &:first-child{
                .chose{
                  max-height: 300/$f+vw;
                  overflow-y: scroll;
                }
              }
            }
          }
        }

        .r {
          width: 70%;

          .list {
            border-top: 1px solid #C7C7C7;
            .item {
              border-bottom: 1px solid #C7C7C7;
              cursor: pointer;
              .d1 {
                padding: 40/$f+vw 30/$f+vw;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .lb {
                  .pt {
                    color: rgba(25, 25, 25, 1);
                    font-size: 24/$f+vw;
                    line-height: 1.5;
                    margin-bottom: 25/$f+vw;
                  }

                  .tags {
                    display: flex;
                    align-items: center;
                    line-height: 1;

                    .sp1 {
                      padding: 10/$f+vw 30/$f+vw;
                      background: rgba(25, 25, 25, 1);
                      border-radius: 20/$f+vw;
                      color: white;
                      font-size: 16/$f+vw;
                    }

                    .yq {
                      display: flex;
                      align-items: center;

                      span {
                        color: rgba(102, 102, 102, 1);
                        font-size: 16/$f+vw;
                        margin: 0 24/$f+vw;
                      }

                      .line {
                        width: 1px;
                        height: 12/$f+vw;
                        background: rgba(102, 102, 102, 1);
                        margin: 0 5/$f+vw;
                      }
                    }
                  }
                }

                .icon {
                  svg {
                    width: 60/$f+vw;
                    display: block;
                  }
                }
              }

              .d2 {
                color: #000;
                font-size: 16/$f+vw;
                line-height: 1.75;
                display: none;
                .html {
                  padding: 0 30/$f+vw;
                }

                .btn {
                  text-align: right;
                  margin: 60/$f+vw 0;
                  a {
                    border-radius: 90/$f+vw;
                    background: #E94829;
                    padding: 21/$f+vw 46/$f+vw;
                    display: inline-block;
                    color:white;
                    font-size: 18/$f+vw;
                    line-height: 1;
                  }
                }
              }
            }
          }

          .pager {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 60/$f+vw 0;

            .prev,
            .next {
              svg {
                display: block;
                width: 23/$f+vw;
              }
            }

            a {
              img {
                margin: 0 0 0 10px;
                display: block;
              }
            }

            a:nth-last-child(2) {
              img {
                margin: 0 10px 0 0;
              }
            }

            .nums {
              display: flex;
              margin: 0 1vw;

              a {
                color: rgba(139, 139, 139, 1);
                font-size: 20/$f+vw;
                padding: 0.1vw 0.5vw;
                margin: 0 0.2vw;

              }


              .active {
                color: #FB0000;
                border-bottom: 2px solid #FB0000;
                font-weight: 600;
              }
            }

            p {
              color: rgba(51, 51, 51, 1);
              font-size: 15/$f+vw;
              margin-left: 40/$f+vw;
            }
          }
        }
      }
    }

    .section2 {
      margin: 150/$f+vw 0;

      .t {
        color: rgba(25, 25, 25, 1);
        font-size: 56/$f+vw;
        line-height: 1.32;
      }

      .list {
        margin: 80/$f+vw 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0 40/$f+vw;

        .item {
          width: 100%;
          padding: 80/$f+vw 0;
          text-align: center;

          .icon {
            width: 80/$f+vw;
            height: 80/$f+vw;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;

            img {
              max-width: 100%;
              object-fit: contain;
            }
          }

          .p1 {
            margin: 40/$f+vw 0 15/$f+vw 0;
            color: rgba(25, 25, 25, 1);
            font-size: 16/$f+vw;
            line-height: 1;
          }

          .p2 {
            color: rgba(25, 25, 25, 1);
            font-size: 24/$f+vw;
            line-height: 1;
          }
        }
      }

      .notice {
        .p1 {
          color: rgba(25, 25, 25, 1);
          font-size: 18/$f+vw;
          margin-bottom: 12/$f+vw;
        }

        .des {
          color: rgba(102, 102, 102, 1);
          font-size: 16/$f+vw;
          line-height: 1.8;
        }
      }
    }
  }


  @media screen and (max-width: 1024px) {
    .banner {
      img {
        height: 300px;
      }

      .text {
        padding: 0 5%;
        bottom: 20px;
        ;

        .p1 {
          font-size: 24px;
        }

        .des {
          font-size: 16px;
          margin-top: 10px;
        }
      }
    }

    .nav_menu {
      padding: 0;

      a {
        padding: 15px 10px;
        font-size: 14px;
      }

      span {
        height: 10px;
      }
    }

    .container{
       margin: 30px 5%;
       .back{
        svg{
          width: 20px;
        }
        p{
          font-size: 16px;
          margin-left: 10px;
        }
       }
       .section1{
        .t{
          font-size: 24px;
          margin: 20px 0;
        }
        .content{
          flex-direction: column;
          .l{
            width: 100%;
            .types{
              .box{
                .pt{
                  font-size: 18px;
                  padding: 15px;
                  margin-bottom: 15px;
                  svg{
                    width: 20px;
                  }
                }
                .chose{
                   .item{
                    margin-bottom: 10px;
                    .k{
                      width: 20px;
                      height: 20px;
                    }
                    p{
                      font-size: 16px;
                      margin-left: 10px;
                    }
                   }
                }
              }
            }
          }
          .r{
            width: 100%;
            margin-top: 20px;
            .list{
              margin-bottom: 40px;
              .item{
                .d1{
                  padding: 20px 15px;
                  .lb{
                    .pt{
                      font-size: 18px;
                      margin-bottom: 0;
                    }
                    .tags{
                      flex-direction: column;
                      align-items: flex-start;
                      .sp1{
                        margin: 10px 0;
                        font-size: 14px;
                        padding: 5px 10px;
                        border-radius: 20px;
                      }
                      .yq{
                        span{
                          font-size: 14px;
                          margin: 0 10px 0 0;
                        }
                        .line{
                          height: 10px;
                          margin-right: 10px;
                        }
                      }
                    }
                  }
                  .icon{
                    svg{
                      width: 20px;
                    }
                  }
                }
                .d2{
                  .html{
                    padding: 0 15px;
                    font-size: 14px;
                  }
                  .btn{
                    margin: 20px 15px;
                    a{
                      font-size: 16px;
                      padding: 8px 15px;
                    }
                  }
                }
              }
            }
            .pager {
    
              .prev,
              .next {
                svg {
                  width: auto;
                }
              }
      
              .nums {
                margin: 0 10px;
      
                a {
                  font-size: 16px;
                  padding: 3px 5px;
                  margin: 0 5px;
                }
              }
              p{
                font-size: 14px;
              }
            }
          }
        }
       }
       .section2{
        margin: 30px 0;
        .t{
          font-size: 24px;
        }
        .list{
          grid-template-columns: repeat(2, 1fr);
         gap: 10px;
         margin: 30px 0;
         .item{
          .icon{
            width: 100px;
            height: 100px;
          }
          .p1{
            font-size: 16px;
            margin: 15px 0 10px 0;
          }
          .p2{
            font-size: 18px;
          }
         }
        }
        .notice{
          .p1{
            font-size: 16px;
            margin-bottom: 10px;
          }
          .des{
            font-size: 16px;
          }
        }
       }
    }

  }
}